<template>
  <view class="settings-page">
    <!-- 设置项列表 -->
    <view class="settings-list">
      <view 
        class="setting-item" 
        v-for="(item, index) in settings" 
        :key="index"
        @click="handleSettingClick(item)"
      >
        <text class="item-text">{{ item.name }}</text>
        <view class="item-right">
          <text v-if="item.extra" class="extra-text">{{ item.extra }}</text>
          <text class="arrow-right"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 设置项数据
const settings = ref([
  { name: '账号与安全', path: '/pagesMy/settings/account-security' },
  { name: '通用设置', path: '/pagesMy/settings/general' },
  { name: '通知设置', path: '/pagesMy/settings/notifications' },
  { name: '隐私设置', path: '/pagesMy/settings/privacy' },
  { name: '存储空间', extra: '256MB/512MB' },
  { name: '反馈', path: '/pagesMy/feedback/feedback' }
])

// 处理设置项点击
const handleSettingClick = (item: any) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path
    })
  } else {
    // 无路径的项可以添加特定逻辑
    uni.showToast({
      title: `点击了${item.name}`,
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.settings-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.settings-list {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-text {
  font-size: 32rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.extra-text {
  font-size: 28rpx;
  color: #999;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
  border-left: 12rpx solid #999;
}
</style>
